import { UserOutlined } from '@ant-design/icons';
import { PageContainer, ProCard } from '@ant-design/pro-components';
import type { TabsProps } from 'antd';
import { Avatar, Row, Tabs, Tag } from 'antd';
import React from 'react';

const Center: React.FC = () => {
  const onChange = (key: string) => {
    console.log(key);
  };
  const items: TabsProps['items'] = [
    {
      key: '1',
      label: '基础信息',
    },
    {
      key: '2',
      label: '安全设置',
    },
  ];

  return (
    <PageContainer>
      <ProCard>
        <Row>
          <Avatar style={{ marginRight: '10px' }} size={64} icon={<UserOutlined />} />
          <div>
            <div style={{ fontSize: '20px', fontWeight: 600, marginBottom: '6px' }}>
              <span style={{ marginRight: '6px' }}>狗屎甲方</span>
              <Tag color="magenta">超级管理员</Tag>
            </div>
            <div style={{ fontSize: '14px', color: '#444' }}>今天是你来到工坊的</div>
          </div>
        </Row>
      </ProCard>
      <br />
      <ProCard>
        <Tabs
          style={{ height: '13.75rem' }}
          defaultActiveKey="1"
          items={items}
          onChange={onChange}
        />
      </ProCard>
    </PageContainer>
  );
};

export default Center;
